<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>兴趣与技术偏好调查问卷</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.6-rc.1/dist/css/select2.min.css" integrity="sha256-MeSf8Rmg3b5qLFlijnpxk6l+IJkiR91//YGPCrCmogU=" crossorigin="anonymous">
    <link rel="stylesheet" href="http://127.0.0.1:3000/static/app.css">
    <style>
        body {
            background: #f7f9fa;
        }
        .main {
            margin-top: 40px;
        }
        .survey-header {
            background: #007bff;
            color: #fff;
            border-radius: 8px;
            padding: 32px 24px 16px 24px;
            margin-bottom: 24px;
        }
        .survey-header h2 {
            font-weight: 700;
        }
        .survey-header p {
            font-size: 1.1rem;
            margin-bottom: 0;
        }
        .survey-form {
            background: #fff;
            border-radius: 8px;
            padding: 32px 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .form-section-title {
            font-size: 1.15rem;
            font-weight: 600;
            margin-bottom: 12px;
            color: #333;
        }
        .select2-container--default .select2-selection--multiple {
            border-radius: 4px;
            border: 1px solid #ced4da;
        }
        .btn-primary {
            background: #007bff;
            border: none;
        }
        .btn-primary:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
<section role="main" class="main">
    <div class="container">
        <div class="survey-header text-center">
            <img src="/static/i.png" alt="logo" width="64" height="64" class="mb-3"/>
            <h2>兴趣与技术偏好调查问卷</h2>
            <p>我们希望了解您的编程语言和解题方向偏好，以便为您推荐更合适的内容。请放心填写，所有信息仅用于统计分析。</p>
        </div>
        <div class="survey-form mx-auto" style="max-width: 520px;">
            <form method="post">
                <div class="form-group">
                    <label class="form-section-title" for="language">您常用或喜欢的编程语言</label>
                    <select class="form-control" id="language" name="language[]" multiple="multiple">
                        <option value="php" <%- language.indexOf('php') >= 0 ? 'selected' : '' %> >PHP</option>
                        <option value="python" <%- language.indexOf('python') >= 0 ? 'selected' : '' %> >Python</option>
                        <option value="go" <%- language.indexOf('go') >= 0 ? 'selected' : '' %> >GO</option>
                        <option value="javascript" <%- language.indexOf('javascript') >= 0 ? 'selected' : '' %> >Javascript</option>
                        <option value="java" <%- language.indexOf('java') >= 0 ? 'selected' : '' %> >JAVA</option>
                        <option value="ruby" <%- language.indexOf('ruby') >= 0 ? 'selected' : '' %> >Ruby</option>
                    </select>
                    <small class="form-text text-muted">可多选，选择您最常用或最喜欢的语言。</small>
                </div>
                <div class="form-group mt-4">
                    <label class="form-section-title" for="category">您感兴趣的题目类型</label>
                    <select class="form-control" id="category" name="category[]" multiple="multiple">
                        <option value="web" <%- category.indexOf('web') >= 0 ? 'selected' : '' %> >Web</option>
                        <option value="pwn" <%- category.indexOf('pwn') >= 0 ? 'selected' : '' %> >PWN</option>
                        <option value="crypto" <%- category.indexOf('crypto') >= 0 ? 'selected' : '' %> >Crypto</option>
                        <option value="reverse" <%- category.indexOf('reverse') >= 0 ? 'selected' : '' %> >Reverse</option>
                        <option value="misc" <%- category.indexOf('misc') >= 0 ? 'selected' : '' %> >Misc</option>
                    </select>
                    <small class="form-text text-muted">可多选，选择您最感兴趣的题目方向。</small>
                </div>
                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-primary btn-lg px-5">提交问卷</button>
                </div>
            </form>
        </div>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.6-rc.1/dist/js/select2.min.js" integrity="sha256-190Fv8aJAduyyIOnvWVpjCmzkX1h8OEtGWbcoU1QVsA=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {
        $('.form-control').select2({
            width: '100%',
            placeholder: '请选择',
            allowClear: true
        });
    });
</script>
</body>
</html>